// Community Page
$navigation_height: 100px;
$carousel_height: 360px;

.community .grp-list,
.community .res-list {
	.section-header {
		margin-bottom: 2em;
	}
	ul.row {
		padding-bottom: 2em;
	}
}

.community {

	.slideshow-title {
		color: #fff;
		text-align: center;
		padding: 3em 0 2em 0;
		@include mobile { padding: 1em 0; }

		h1 {
			font-size: 2.6em;
			margin: 0;
			color: #fff;

			@include mobile {
				padding-top: 0;
				font-size: 2em;
			}
		}
		p {
			font-size: 1.3em;
			margin-top: 10px;
			@include mobile {
				margin-top: 5px;
				font-size: 1.1em;
			}
		}
	}

	.carousel-arrows {
		position: absolute;

		width: 100%;
		height: $carousel_height;
		@include tablet { display: none; }

		.prev {
			position: absolute; z-index: 1000; top: 50%; margin-top: -47px; left:	20px;
			@include mobile {
				width: 22px;
				height: 47px;
				top: 100px;
				left: 10px;
			}
		}
		.next {
			position: absolute; z-index: 1000; top: 50%; margin-top: -47px; right: 20px;
			@include mobile {
				width: 22px;
				height: 47px;
				top: 100px;
				right: 10px;
			}
		}
	}

	.iosslider {
		// required
		position: relative;
		top: 0;
		left: 0;
		overflow: hidden;

		width: 100vw;
		height: $carousel_height;
		@include tablet { height: 300px; }
//		@include tall	 { height: 400px; }
		@include mobile { height: 480px; }

		// slider
		.slider {
			// required
			width: 100%;
			height: 100%;

			.slide {
				// required
				float: left;
				width: 100%;
				height: 100%;

				color: #fff;

				.txt {
					@include tablet {
						font-size: 1em;
					}
				}
				h3 {
					color: #fff;
					font-size: 1.5em;
					@include tablet { font-size: 2.2em; }
				}
				p {
					font-size: 1.1em;
				}
				h3, p {
					margin-bottom: 20px;
				}
				.button {
					border: none;
					border: 1px solid #fff;

					font-size: 1.1em;
					margin-top: 0.8em;
					font-weight: 500;
					a {
						color: #fff;
					}
				}

				img {
					margin-top: 1em;
					@include tablet {
						$size: 250px;
						width: $size;
						height: $size;
					}
					@include mobile {
						$size: 130px;
						width: $size;
						height: $size;
//						margin-top: 3em;
					}
				}
				.txt {
					@include mobile { padding: 0 2em 2em 2em; }
				}
			}
		}
	}

	.carousel-navigation {
		text-align: center;
		padding: 0;
		margin: 0;
		height: $navigation_height;
		overflow: hidden;

		@include mobile {
			height: 40px;
//			margin-top: -40px;
		}

		.app-items {
			border-top: 1px solid rgba(255,255,255,0.30);
//			border-top: 1px solid #ccc;

			.item {
				margin: 12px;
				display: inline-block;

				@include mobile {
					margin: 12px 4px;
					border-radius: 20px;
					background-color: rgba(255,255,255,0.3);
				}

				&.active,
				&:hover {
					background-color: rgba(255,255,255,0.25);
					border-radius: 20px;
					@include mobile {
						background-color: #fff;
					}
				}
			}

			img {
				width:	45px;
				height: 45px;
				display: block;
				padding: 1em;
				box-sizing: content-box;
				@include mobile {
					opacity: 0;
					padding: 5px;
					width: 1px;
					height: 1px;
				}
			}
		}
	}

}

.carousel {
	transition: background 1s;
	background: #061524;
}
.carousel.framer	 { background: transparent url(/static/images/community/bg/framer.jpg)	 center center/cover no-repeat; }
.carousel.avocode	{ background: transparent url(/static/images/community/bg/avocode.jpg)	center center/cover no-repeat; }
.carousel.origami	{ background: transparent url(/static/images/community/bg/origami.jpg)	center center/cover no-repeat; }
.carousel.invision { background: transparent url(/static/images/community/bg/invision.jpg) center center/cover no-repeat; }
.carousel.wake		 { background: transparent url(/static/images/community/bg/wake.png)		 center center/cover no-repeat; }
.carousel.zeplin	 { background: transparent url(/static/images/community/bg/zeplin.png)	 center center/cover no-repeat; }
.carousel.flinto	 { background: transparent url(/static/images/community/bg/flinto.png)	 center center/cover no-repeat; }
.carousel.marvel	 { background: transparent url(/static/images/community/bg/marvel.jpg)	 center center/cover no-repeat; }
